<template>
  <div class="refine_outlan">
    <!-- <router-view></router-view> -->
    <h2 class="titleblue">外网公告列表</h2>
    <div class="contant">
      <div @click="show" class="fl create" v-if="sysShow">发布外网公告</div>
      <div class="fr">
        <div class="inlanselect">
          <label>公告类型</label>
          <el-select v-model="type" class="select-width-100" @change="change" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-input prefix-icon="el-icon-search" placeholder="搜索公告" v-model="search" class="plansearch" clearable
                  @clear="change" @change="change">
          <span slot="append">搜索</span>
        </el-input>
      </div>
      <data-table :page='currentPage' :head="thead1" :data="tableData1"></data-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper"
        :total="totalPage"
        background
      >
      </el-pagination>
    </div>

    <el-dialog
      title=""
      :visible.sync="publishDialog"
      width="80%"
      append-to-body
      @close="close"
    >
      <span><router-view @close="close"></router-view></span>
    </el-dialog>
  </div>
</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'
  import * as noticeService from '@/services/NoticeService'
  import dictionaryService from '@/services/DictionaryService'

  export default {
    components: {
      'data-table': DataTable,
    },
    data: function () {
      return {
        type: '',
        search: '',
        currentPage: 1,
        publishDialog: false,
        totalPage: 0,
        options: [],
        page: 10,
        thead1: [{
          name: "公告类型",
          prop: "type",
          width: "200"
        },
          {
            name: "短信内容",
            prop: "content"
          },
          {
            name: "发送时间",
            prop: "sendTime",
            width: "170"
          },
        ],
        tableData1: [],
        detail: '',
        sysShow: false,

      };
    },
    async created() {
      this.sysShow = true;
      this.sysShow = true;
      let options = await dictionaryService.find('GGLX');
      this.options = options.map((option) => {
        return {
          "label": option.name,
          'value': option.id
        }
      });
      this.getData()
    },
    methods: {
      show() {
        this.publishDialog = true
        this.$router.push("/out-notice/edit")
      },
      close() {
        this.publishDialog = false;
        this.getData();
      },
      handleSizeChange(val) {
        this.getData(val);
      },
      handleCurrentChange(val) {
        this.getData(val);
      },
      change() {
        this.currentPage = 1
        this.getData()
      },
      getData() {
        let searchUrl = 'releaseFlag==true;intranetFlag==false;';
        if (this.type) {
          searchUrl = (searchUrl ? searchUrl : '') + 'type==' + this.type + ';';
        }
        if (this.search) {
          searchUrl = (searchUrl ? searchUrl : '') + 'title=like=' + this.search + ';';
        }
        this.searchUrl = searchUrl;
        noticeService.noticeList({size: this.page, page: (this.currentPage - 1), query: searchUrl}).then((res) => {
          this.oldData = JSON.parse(JSON.stringify(res.data));
          this.tableData1 = res.data;
          this.tableData1.forEach((item, i) => {
            let sendTime = item.sendTime;
            item.sendTime = sendTime ? this.$m(sendTime).format('YYYY-MM-DD HH:mm:ss') : '';
            item.index = i;
            this.options.forEach((option, k) => {
              if (item.type === option.value) {
                item.type = option.label;
              }
            })
          });
          this.totalPage = parseInt(res.headers['x-total-count'])
        });
      }
    }
  };
</script>

<style lang="scss">
  .refine_outlan {
    width: 100%;
    display: inline-block;

    .inlanselect {
      float: left;
      width: 200px;
    }
    .plansearch {
      float: right;
      width: 310px;
    }
    .plansearch input {
      width: 230px;
      margin-right: 10px;
      border-radius: 0px;
    }
    .plansearch .el-input-group__append {
      border-left: 1px;
      width: 56px;
      background-color: #0062cd;
      border-radius: 2px;
      font-size: 14px;
      color: #ffffff;
    }
    .table {
      margin-top: 20px;
      width: 100%;
      display: inline-block;
    }
    .el-progress {
      width: 80%;
      float: left;
    }
    .number {
      float: left;
      font-size: 12px;
    }
    .el-table tr:nth-child(2n) {
      background: #FAFAFA
    }
    .el-table__body,
    .el-table__footer,
    .el-table__header {
      width: 100% !important;
    }
  }
</style>
